<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>导航条</title>
    <link rel="stylesheet" href="../../build/css/导航条-demo.css">
    <link rel="stylesheet" href="../../vendors/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="menu-header">
    <div class="menu-container">
        <ul style="display: block">
            <li>
                <span>首页</span>
            </li>
            <li>
                <span>学院概况</span>
                <!--<section class="menu-first">-->
                    <!--<div class="menu-option">选项1</div>-->
                    <!--<div class="menu-option">选项2</div>-->
                    <!--<div class="menu-option">选项3</div>-->
                    <!--<div class="menu-option">选项4</div>-->
                    <!--<div class="menu-option">-->
                        <!--<span>选项5</span>-->
                        <!--<section class="menu-second">-->
                            <!--<div class="menu-option">选项1</div>-->
                            <!--<div class="menu-option">选项2</div>-->
                            <!--<div class="menu-option">选项3</div>-->
                            <!--<div class="menu-option">选项4</div>-->
                            <!--<div class="menu-option">选项5</div>-->
                            <!--<div class="menu-option">选项6</div>-->
                        <!--</section>-->
                    <!--</div>-->
                <!--</section>-->
            </li>
            <li>
                <span>选项卡2</span>
            </li>
            <li>
                <span>选项卡3</span>
            </li>
            <li>
                <span>选项卡4</span>
            </li>
            <li>
                <span>选项卡5</span>
            </li>
            <li>
                <span>选项卡6</span>
            </li>
        </ul>
    </div>
    <i class="fa fa-bars menu-btn" aria-hidden="true" onclick="toggleMenu()"></i>
</div>
<script>
    function toggleMenu() {
        var ulEle = document.getElementsByTagName("ul")[0];
        if(ulEle.style.display != "none"){
            ulEle.style.display = "none";
        }else{
            ulEle.style.display = "block";
        }
    }
</script>
</body>
</html>